<!--
 * @Author: actor
 * @Date: 2023-11-13 15:42:40
 * @email: 395593455@qq.com
 * @LastEditors: actor
 * @LastEditTime: 2023-12-19 10:22:05
 * @FilePath: \i-hos-app\shared\emr\src\components\insert\Tooth.vue
 * @Description: 恒牙牙位插入组件
-->
<template>
  <div class="tooth">
    <Tooth @toAddTooth="creatTooth" />
  </div>
  <div ref="refInsertComponent" style="display: none">
    <div class="flexibleTooth" :contenteditable="false" :data-config="JSON.stringify(config)">
      <span>恒牙牙位：</span>
      <table border="0" cellspacing="0" cellpadding="0">
        <tbody>
          <tr>
            <td class="tl">{{ config.toothSeat?.leftTop.join(' ') }}</td>
            <td class="tr">{{ config.toothSeat?.rightTop.join(' ') }}</td>
          </tr>
          <tr>
            <td class="bl">{{ config.toothSeat?.leftBottom.join(' ') }}</td>
            <td class="br">{{ config.toothSeat?.rightBottom.join(' ') }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { nextTick, Ref, ref, reactive } from 'vue'
  // 引入公共组件
  import Tooth from '../../components/common/Tooth.vue' // 引入日期组件
  // 接口约束
  import { IToothSeat } from '../../interface/page'
  import { IConfig } from '../../interface/page'
  // 组件插入hooks
  import { useInsertComponent } from '../../hooks/useInsertComponent'
  let config: IConfig = reactive({
    type: 'tooth',
    name: '',
    des: '',
    textVal: '',
    toothSeat: {
      leftTop: [], // 左上牙位
      rightTop: [], // 右上牙位
      leftBottom: [], // 左下牙位
      rightBottom: [], // 右下牙位
    },
  })
  const refInsertComponent: Ref<HTMLElement | null> = ref(null)
  // 动态创建表格
  const creatTooth = (flag: IToothSeat): void => {
    // toothSeat.value = flag.value
    config.toothSeat = flag
    nextTick(() => {
      // 向电子病历页面插入的组件
      useInsertComponent(refInsertComponent.value as HTMLElement)
    })
  }
</script>

<style scoped lang="scss">
  .tooth {
    .tooth {
      box-shadow: none;
      padding: 0;
    }
  }
  .flexibleTooth {
    display: inline-flex;
    align-items: center;
    margin-right: 2px;
    position: relative;
    cursor: pointer;
    &::before {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      background-color: transparent;
      position: absolute;
      top: 0;
      left: 0;
    }
    table {
      td {
        padding: 5px;
        font-weight: normal;
        min-width: 40px;
        border: 0;
        span {
          padding: 0 3px;
        }
        &:nth-of-type(1) {
          border-right: 1px solid #000;
          // direction: rtl;
          text-align: right;
        }
      }
      tr {
        &:nth-of-type(1) {
          td {
            border-bottom: 1px solid #000;
          }
        }
      }
    }
    p {
      padding: 5px;
      margin: 0;
      width: 50%;
      white-space: nowrap;
      &:nth-of-type(1),
      &:nth-of-type(3) {
        border-right: 1px solid #000;
        direction: rtl;
      }
      &:nth-of-type(1),
      &:nth-of-type(2) {
        border-bottom: 1px solid #000;
      }
      span {
        padding: 0 3px;
      }
    }
  }
</style>
